<script setup lang="ts">
import { ref } from 'vue';
import { useNurseStore } from '@/store';
import { useNurses } from '@/service';
import { hideLoading, showToast, showLoading, navigateBack, getCurrentInstance } from '@tarojs/taro';
import { localStg } from '@/utils';
import { SUCCESS_MSG_DURATION } from '@/constants';

const { imageUrl } = useNurseStore();

const {
    router: {
        params: { ordersNursesId }
    }
}: any = getCurrentInstance();

const { addNurseUserOrdersNursesExecute } = useNurses();

definePageConfig({
    navigationBarTitleText: '订单执行记录'
});

const defaultFileList = ref<any>([]);

const formData = ref<any>({
    ramark: '',
    pics: {},
    pic: ''
});

const ruleForm = ref<any>(null);

function uploadDelete(data: any) {
    Reflect.deleteProperty(formData.value?.pics, `${data?.file?.name}`);
}

function uploadSuccess(data: any) {
    const result = JSON.parse(data?.data?.data);

    const fileItemName = data?.fileItem?.name;

    const { message, success } = result;

    if (success && message) {
        formData.value.pics[`${fileItemName}`] = message;
    }
}
const token = localStg.get('token');
const headers = ref({
    'Content-Type': 'multipart/form-data',
    'X-Access-Token': token
});

const submit = async () => {
    const pic = Array.from(new Map(Object.entries(formData.value?.pics)))
        .map(([key, value]) => `${value}`)
        .join(',');

    formData.value.pic = pic;

    const { valid } = await ruleForm.value.validate();

    if (!valid) return;

    ruleForm.value.validate().then(async ({ valid }: any) => {
        if (!valid) return;

        showLoading({ title: '正在发布...' });

        const { error } = await addNurseUserOrdersNursesExecute({
            ...formData.value,
            ordersNursesId,
            pic,
            status: '1',
            createBy: ordersNursesId
        });
        if (!error) {
            hideLoading();
            showToast({
                title: '发布成功',
                icon: 'success',
                duration: SUCCESS_MSG_DURATION
            });
            setTimeout(() => {
                navigateBack();
            }, 1000);
        }
    });
};
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="订单执行记录" showLeft /> -->
        <view class="w-375px flex-col-center">
            <nut-form ref="ruleForm" class="w-360px" :model-value="formData">
                <nut-form-item class="flex-center" label="执行图片" prop="pic" required
                    :rules="[{ required: true, message: '请上传图片' }]">
                    <nut-uploader v-model:file-list="defaultFileList" :headers="headers" :multiple="true"
                        :url="`${imageUrl}/sys/common/upload?biz=execute/${ordersNursesId}`" :maximize="1024 * 20000"
                        maximum="5" @success="uploadSuccess" @delete="uploadDelete"></nut-uploader>
                </nut-form-item>
                <nut-form-item label="备注" prop="description">
                    <nut-textarea v-model="formData.description" placeholder="请输入备注" />
                </nut-form-item>
            </nut-form>
            <view class="w-375px bg-white h-48px pos-fixed pos-bottom-10 pos-left-0 flex-center justify-around">
                <basic-button text="发布" @click="submit" />
            </view>
        </view>
    </basic-layout>
</template>

<style lang="scss">
.h5-img,
.h5-video {
    max-width: 100%;
    height: 100%;
}
</style>
